<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="ruleForm"
					:model="ruleForm"
					label-width="120px"
					class="rule-form"
					:inline="true"
				>
					<!-- 功能开关 -->
					<SwitchToggle
						permissionId="90240053"
						:configData="configData"
						:key="switchKey"
						@getTypeValueAddedConfig="getValueAddedConfigByType"
					></SwitchToggle>
					<el-form-item
						prop="sendMessageInterval"
						:label="$t('dxn.service_manager.send_message_interval')"
					>
						<el-input
							v-if="isEdit"
							v-model="ruleForm.sendMessageInterval"
							style="width: 80px;"
							v-input="{ name: 'int' }"
							:maxlength="2"
						></el-input>
						<span v-else>
							{{ ruleForm.sendMessageInterval }}
						</span>
						<span>秒</span>
					</el-form-item>

					<el-form-item
						v-if="hasPermission('90240053')"
						style="margin-left: 20px;"
					>
						<div v-if="!isEdit">
							<el-button
								type="primary"
								@click="handleConfigEdit"
								size="small"
							>
								{{ $t('dxn.game_rule.edit_btn') }}
							</el-button>
						</div>
						<div v-else>
							<el-button
								type="plain"
								@click="handleConfigCancel"
								size="small"
							>
								{{ $t('dxn.game_rule.cancel_btn') }}
							</el-button>
							<el-button
								type="primary"
								:loading="btnLoading"
								@click="handleConfigSubmit"
								size="small"
							>
								{{ $t('dxn.game_rule.save_btn') }}
							</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import SwitchToggle from '../components/SwitchToggle'
export default {
	name: routerNames.voicePhrases,
	components: { SwitchToggle },
	mixins: [list],
	data() {
		return {
			btnLoading: false,
			isEdit: false,
			disabled: true,
			switchKey: 0,
			configType: 2,
			configItem: {},
			configData: {
				configId: 0,
				configStatus: 0
			},
			ruleForm: {
				sendMessageInterval: undefined
			}
		}
	},
	created() {
		this.getValueAddedConfigByType()
	},
	methods: {
		getValueAddedConfigByType() {
			const params = { type: this.configType }
			this.$api.getValueAddedConfigByTypeBend(params).then((res) => {
				this.configItem = res?.data[0] || {}
				this.configData = {
					configId: this.configItem.id,
					configStatus: this.configItem.enableFlag || 0
				}
				this.ruleForm = {
					sendMessageInterval: this.configItem.sendMessageInterval
				}
				this.switchKey = Math.random()
			})
		},
		handleConfigEdit() {
			this.isEdit = true
		},
		handleConfigCancel() {
			this.isEdit = false
			this.ruleForm = {
				sendMessageInterval: this.configItem.sendMessageInterval
			}
		},
		handleConfigSubmit() {
			if (!this.configData.configId) {
				this.$message.error(
					this.$t('dxn.service_manager.config_not_exist_tips')
				)
				return
			}
			if (this.ruleForm.sendMessageInterval === '') {
				this.$message.closeAll()
				this.$message.error(
					this.$t('dxn.service_manager.send_message_interval_tips')
				)
				return
			}
			const valArr = [
				'sendMessageInterval' + '_' + this.ruleForm.sendMessageInterval
			]
			const params = {
				id: this.configData.configId,
				vals: valArr.join(',')
			}
			this.btnLoading = true
			this.$api
				.updateValueAddedConfigBend(params)
				.then((res) => {
					this.btnLoading = false
					this.isEdit = false
					if (res?.code === 200) {
						this.$message.success(this.$t('common.action_success'))
					}
				})
				.catch(() => {
					this.btnLoading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.rule-form {
	margin: 15px 30px;
	.status-lable {
		line-height: 1.2;
	}
}
</style>
